import React, { Component, PureComponent } from 'react';
import {
  Table,
  Modal,
  Form,
  Checkbox,
} from 'antd';
import { connect } from 'dva';

@connect(({ userModels, loading }) => ({
  userModels,
  loading: loading.models.userModels,
}))

//查看详情
@Form.create()
class SelectRole extends PureComponent {
  constructor(props) {
    super(props);

  }

  state = {
    RoleLists: [],
    selectArr: [],
  };

  componentWillMount() {
    const { selectedRows, dispatch } = this.props;
    let _this = this;
    dispatch({
      type: 'userModels/getRoleList',
      payload: { adminNo: selectedRows.adminNo },
      callback(res) {
        _this.setState({
          RoleLists: res.msg,
        });
      },
    });
  }

  render() {
    const { RoleLists, selectArr } = this.state;
    const { SelectRoleView, handleBindRole, handleSelectRole } = this.props;
    const CheckboxChange = (val, e, index) => {
      let cloneData = JSON.parse(JSON.stringify(RoleLists));
      cloneData.forEach((item) => {
        item.checked = false;
        cloneData[index].checked = !val.checked;
        if (item.checked) {
          this.setState({
            selectArr: [...selectArr, item],
          });
        }
      });
      this.setState({
        RoleLists: cloneData,
      });
    };
    const columns = [
      {
        title: '选择',
        key: 'dataIndex',
        render: (val, record, index) => <Checkbox checked={val.checked}
                                                  onChange={() => CheckboxChange(val, event, index)}/>,
      },
      {
        title: '角色名称',
        dataIndex: 'roleName',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
      }];

    const paginationProps = {
      pagination: { position: 'none' },
    };
    const handleSelet = () => {
      handleSelectRole(false, selectArr);
    };
    const onCancel = () => {
      handleBindRole(false, []);
    };
    return (

      <Modal
        destroyOnClose
        title="绑定角色"
        visible={SelectRoleView}
        onOk={handleSelet}
        onCancel={onCancel}
      >
        <Table
          {...paginationProps}
          rowKey={'roleNo'}
          rowSelection={undefined}
          columns={columns}
          dataSource={RoleLists}/>

      </Modal>
    );
  }
};

export default SelectRole;
